[테마 6] 바이브 코딩 — 홈페이지 주문서 (코드 몰라도 됩니다)

■ 어디서 만들까 (2026. 10. 28. 확인)
· Gemini 캔버스(추천, 무료): 입력창 [캔버스] 선택 → 주문서 붙여 넣기 → 오른쪽 미리 보기
· Claude(무료): 디자인이 가장 깔끔. 한도가 작아 마무리 다듬기용. 무료는 새 결과물 링크 공유 안 됨 → HTML로 받기
· ChatGPT(무료): 캔버스는 없어졌고, 답 속 코드 칸의 [Preview]로 미리 보기 → [복사]

■ 주문서 (Gemini 캔버스 · Claude · ChatGPT 어디에나 붙여 넣기)
'2026 하반기 학교 인성교육 담당자 협의회' 안내 홈페이지를 만들어 줘.
- 누가 보나: 초등학교 인성교육 담당 선생님(휴대폰으로 많이 봄)
- 들어갈 내용: 맨 위 큰 제목과 한 줄 소개, 행사 개요(일시·장소·대상), 진행 순서 표, 2026 성과 숫자 4개, 신청·제출 기한 표, 자주 묻는 질문 3개(누르면 펼쳐짐)
- 모양: 차분한 초록과 따뜻한 주황, 큰 글씨, 휴대폰에서도 보기 좋게, 위쪽에 메뉴(누르면 해당 칸으로 이동)
- 조건: 인터넷 없이 열리는 HTML 한 파일(index.html), 개인정보·연락처는 넣지 않음
- 내용은 아래 원고를 그대로 써 줘.
(같은 폴더의 '교정한 공문(홈페이지 원고)' 또는 테마 3 '발표 원고'를 붙여 넣기)

■ 고쳐 보기 (한 번에 하나씩)
· 맨 위 배경을 사진 대신 부드러운 무늬로 바꿔 줘
· 진행 순서 표를 시간 막대(타임라인) 모양으로 바꿔 줘
· '신청하기' 버튼을 누르면 설문 주소로 가게 해 줘 (주소: 직접 넣기)
· 휴대폰에서 메뉴가 넘치면 가로로 밀어서 보게 해 줘

■ 결과를 홈페이지로 만드는 세 가지 길 (쉬운 순서)
① Gemini 캔버스 공유: 오른쪽 위 '공유 및 내보내기' → 공유 → 링크 복사 (Gemini 안에서 열림, 18세 미만은 못 봄)
② 넷리파이 드롭: index.html을 폴더에 넣고 app.netlify.com/drop 에 폴더째 끌어 놓기 → 주소가 바로 생김
   (1시간 안에 무료 계정으로 가져와야 남음 — 같은 폴더 '넷리파이에 올리는 법' 참고)
③ (강사 시연) Claude Code가 폴더를 만들고 넷리파이에 올리는 것까지 대신 하기

※ 완성 예시: 같은 폴더의 '넷리파이에 끌어 놓을 폴더\index.html'
